<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="数据场名称：">
                  <el-input v-model="from.name" placeholder="请输入数据场名称" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="负责人：">
                  <el-input v-model="from.principal" placeholder="请输入负责人" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="管理员：">
                  <UserSearchable v-model="from.adminId" :type="'adminGetOption'">
                    <template #dropdownTitle>
                      <span>id</span>
                      <span>名称</span>
                      <span>电话</span>
                    </template>
                    <template v-slot:dropdown="{ item }">
                      <span>{{ item.id }}</span>
                      <span>{{ item.realName }}</span>
                      <span>{{ item.phone }}</span>
                    </template>
                  </UserSearchable>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="from.status" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="2" label="关闭"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" type="danger" icon="el-icon-delete" @click="allDel()">删除</el-button>
          <el-button class="mr10" size="small" icon="el-icon-top" @click="exportTable()">导出表格</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="name" label="数据场名称" min-width="80" />
        <el-table-column prop="principal" label="负责人" min-width="80" />
        <el-table-column prop="address" label="数据场地址" min-width="80" />
        <el-table-column prop="realName" label="管理员" min-width="80" />
        <el-table-column prop="userName" label="管理人员" min-width="80" />
        <el-table-column prop="status" label="状态" min-width="80">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" v-if="scope.row.status == 1">正常</el-button>
            <el-button type="info" size="mini" v-if="scope.row.status == 2">关闭</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="150" />
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleChange(scope.row)">变更管理人员</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog title="变更管理人员" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="120px">
        <el-form-item label="管理人员：">
          <el-select style="width: 100%" v-model="ruleForm.uid" placeholder="请选择用户" filterable remote clearable
            :remote-method="loadUsers">
            <el-option v-for="item in users" :key="item.uid" :label="item.nickname" :value="item.uid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UserSearchable from "@/components/UserSearchable";
import {
  adminGetOption,
  datafieldList,
  datafieldSave,
  datafieldInfo,
  datafieldUpdate,
  datafieldDelete,
  datafieldExport,
  datafieldTransfer,
} from "@/api/dataField";
import { userListApi } from "@/api/user";
export default {
  name: "trader",
  components: {
    UserSearchable,
  },
  data() {
    return {
      labelPosition: "right",
      options: [],
      from: {
        name: "",
        principal: "",
        adminId: "",
        status: 1,
        page: 1,
        limit: 15,
      },
      loading: false,
      tableData: {
        data: [],
        total: 0,
      },
      selection: [],
      users: [],
      currentPage: 1,
      pageSize: 15,
      dialogVisible: false,
      ruleForm: {
        dataFactoryId: "",
        adminId: "",
        uid: "",
      },
      rules: {
        uid: [
          {
            required: true,
            message: "请选择管理人员",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    adminGetOption({})
      .then((res) => {
        console.log("获取管理员列表", res);
        this.options = res;
        this.getlist();
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    search() {
      console.log(this.from);
      this.from.page = 1;
      this.from.limit = 15;
      this.getlist();
    },
    reset() {
      this.from = {
        name: "",
        principal: "",
        adminId: "",
        status: 1,
        page: 1,
        limit: 15,
      };
      this.getlist();
    },
    getlist() {
      this.loading = true;
      datafieldList(this.from)
        .then((res) => {
          console.log(res);
          this.tableData.data = res.list;
          this.tableData.total = res.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    handleChange(row) {
      datafieldInfo(row.id)
        .then((res) => {
          console.log("变更管理人员", res);
          this.ruleForm = {
            dataFactoryId: res.id,
            adminId: res.adminId,
            uid: "",
          };
          console.log(this.ruleForm);
          this.dialogVisible = true;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err);
        });
    },
    close() {
      this.ruleForm = {
        dataFactoryId: "",
        adminId: "",
        uid: "",
      };
      this.dialogVisible = false;
    },
    loadUsers(query) {
      if (query !== "") {
        this.currentPage = 1;
        this.users = [];
        this.getuserlist(query);
      } else {
        this.users = [];
      }
    },
    getuserlist(query) {
      let data = {
        page: this.currentPage,
        limit: this.pageSize,
        keywords: query,
      };
      userListApi(data)
        .then((res) => {
          console.log("用户列表", res);
          this.users = this.users.concat(res.list);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          console.log("变更管理员", this.ruleForm);
          datafieldTransfer(this.ruleForm)
            .then((res) => {
              console.log(res);
              this.close();
              this.$message.success("变更成功");
              this.getlist();
            })
            .catch((err) => {
              console.log(err);
              this.$message.error(err);
            });
        } else {
          this.$message.error("请填写完整信息");
        }
      });
    },
    // 选择
    onSelectTab(selection) {
      this.selection = [];
      selection.forEach((item) => {
        this.selection.push(item.id);
      });
      console.log(this.selection);
    },
    allDel() {
      if (this.selection.length == 0) {
        return this.$message.error("至少选择一项");
      }
      console.log(this.selection);
      this.$confirm("确认删除？")
        .then((_) => {
          datafieldDelete(this.selection)
            .then((res) => {
              console.log(res);
              this.$message.success("删除成功");
              this.getlist();
            })
            .catch((err) => {
              console.log(err);
              this.$message.error(err);
            });
        })
        .catch((_) => { });
    },
    exportTable() {
      datafieldExport(this.from)
        .then((res) => {
          console.log("导出表格", res);
          window.open(res.filename);
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err);
        });
    },
    handleDel(row) {
      this.$confirm("确认删除？")
        .then((_) => {
          console.log("删除", row);
          datafieldDelete([row.id])
            .then((res) => {
              console.log(res);
              this.$message.success("删除成功");
              this.getlist();
            })
            .catch((err) => {
              console.log(err);
              this.$message.error(err);
            });
        })
        .catch((_) => { });
    },
    pageChange(page) {
      this.from.page = page;
      this.getlist();
    },
    handleSizeChange(val) {
      this.from.limit = val;
      this.getlist();
    },
  },
};
</script>

<style scoped lang="scss">
.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}
</style>
